<template>
  <div>
    <v-title>用户登录</v-title>
    <el-row>
      <el-col :span="6" :offset="4">
        <h2>用户登录</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="10">
        <img src="@/assets/logo.png" width="200" height="200" />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" :offset="11">
        <p class="title">小c游戏屋</p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" :offset="7">
        <span class="title">用户名</span>
      </el-col>
      <el-col :span="5">
        <el-input
          v-model="username"
          placeholder="请输入用户名"
          validate-event
        />
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="2" :offset="7">
        <span class="title">密码</span>
      </el-col>
      <el-col :span="5">
        <el-input
          v-model="password"
          placeholder="请输入密码"
          type="password"
          validate-event
        />
      </el-col>
    </el-row>
    <br/>
    <el-row>
      <el-col :span="2" :offset="9">
      <el-checkbox v-model="rememberMe">自动登录</el-checkbox>
      </el-col>
    </el-row>
    <br/>
    <el-row>
      <el-col :span="6" :offset="9">
        <span>没有账号？请<el-link type="primary" :underline="false" href="/register">注册</el-link>~或者去<el-link type="primary" :underline="false" href="/home">首页</el-link></span>
      </el-col>
    </el-row>
    <br /><br />
    <el-row>
      <el-col :span="2" :offset="9">
        <el-button type="primary" @click="login">登录</el-button>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="info" @click="onReset">重置</el-button>
      </el-col>
    </el-row>
    <br/><br/>
  </div>
</template>

<script>
import Nav from "@/components/Nav";
import VTitle from '@/components/Title'
import { getUserInfo } from "@/api/index";
import { mapMutations } from "vuex";
export default {
  name: "",
  components: {
    VTitle,
    Nav
  },
  data() {
    return {
      username: "",
      password: "",
      rememberMe: false
    };
  },
  methods: {
    ...mapMutations(["updateUser"]),
    onReset() {
      // 重置
      this.username = "";
      this.password = "";
    },
    async login() {
      let username = this.username;
      let password = this.password;
      let rememberMe = this.rememberMe;
      // 登录
      if (username.length <= 0) {
        this.$message.error("请填写用户名~");
        return;
      }
      if (password.length <= 0) {
        this.$message.error("请填写密码~");
        return;
      }
      //在发登录请求
      try {
        //登录成功
        await this.$store.dispatch("userLogin", {username, password, rememberMe});
        //记录用户信息
        let res = await getUserInfo();
        this.updateUser(res.data);
        //跳转到对应页面
        let goPath = this.$route.query.redirect||'/home';
        this.$router.push(goPath);
        this.$message.success('登录成功~');
      } catch (error) {
        if (error == 'Error: 错误：Bad credentials') {
          this.$message.error('用户名或密码错误~请重新登录~');
          return;
        }
        this.$message.error('非法登录~');
      }
      
      
    },
  },
};
</script>

<style lang="less" scoped>
h2 {
  float: left;
  height: 34px;
  line-height: 34px;
  font-size: 24px;
  position: relative;
  margin-bottom: 20px;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}
.title {
  line-height: 34px;
  font-size: 16px;
  font-weight: bold;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
  margin-bottom: 20px;
}
input {
  width: 40%;
}
</style>